<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
  window._AMapSecurityConfig = {
    securityJsCode: 'd53972147edc14c3370f5a1f23a05bf5'
  };

export default {
  data() {
    return {
      map: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '94219373da83866c5decc398c51332a0',
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.MapType']
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 10,
          center: [121.473667, 31.230525]
        });
        // 添加比例尺控件
        this.map.addControl(new AMap.Scale());
        // 添加工具栏控件
        this.map.addControl(new AMap.ToolBar());
        // 添加地图类型切换控件
        this.map.addControl(new AMap.MapType());
        this.map.addControl(new AMap.ControlBar());
      }).catch((e) => {
        console.log(e);
      });
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  margin-left: 200px;
  width: 1000px;
  height: 500px;
  position: absolute;
}
</style>
